<template>
	<view>
		<pagehead></pagehead>
		<view class="index-near-cont clearfix">
			<view class="clearfix">
				<view class="mer-shop"  v-for="item in list">
					<p>
					
							<view class="mer-shop-img fl">
								<a href="#">
									<image style="width: 140rpx; height: 140rpx;" :src="item.image"></image>
								</a>
							</view>
							<view class="mer-shop-js fl">
								<h3>
									<p>{{item.name}}</p><i class="icon-hezuo">合作</i>
								</h3>
								<div class="mer-shop-area">
									<i class="img-logo">
										<img src="/static/mer_logo_area.png" alt="">
									</i>
									<p>{{item.address}}</p>
								</div>
							</view>
							<view class="cont fr">
								<u-button type="primary" :plain="true" size="mini">预约></u-button>
							</view>
					
		
					</p>
				</view>
		
			</view>
	</view>

	</view>
</template>

<script>
	import pagehead from '@/common/components/head/page-head.vue'
	export default {
		name: 'shopIndex',
		components: {
			pagehead
		},
		data() {
			return {
				list: [{
					image: "/static/head.jfif",
					name: "欧神诺陶瓷",
					address: '佛山创意产业园3楼'
				}, {
					image: "/static/head.jfif",
					name: "广州阿里云IOT事业部",
					address: '广州创意产业园1楼'
				}, {
					image: "/static/head.jfif",
					name: "广州阿里云IOT事业部2",
					address: '广州创意产业园1楼2'
				}]
			}
		},
		onLoad() {

		},
		methods: {
			init(data){
				
			}
		}
	}
</script>

<style>
	page {
		background-color: #f8f9fa;
	}

	.mer-shop-phone {
		overflow: hidden;
		width: 160rpx;
		height: 152rpx;
	}

	.cont {
		text-align: center;
		margin: 50rpx auto;
	}

	.index-near-cont {
		overflow: hidden;
		padding: .2rem .15rem;
		position: relative;
		
	}

	.mer-shop-logo {}

	.fr {
		float: right;
	}

	.img-logo {
		width: 53rpx;
		height: -10rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.mer-shop-js {
		overflow: hidden;
		padding-left: 30rpx;
		padding-top: 0rpx;
		padding-right: 100rpx;
		width: 450rpx;
	}

	.clearfix {
		width: 100%;
		height: 800rpx;
	}

	.mer-shop-img {
		width: 150rpx;
		height: 70rpx;
	}

	.mer-shop-area {
		padding-bottom: .15rem;
		border-bottom: 1px dashed #d7d7d7;
		margin-bottom: 15rpx;
	}

	.icon-hezuo {
		font-size: .12rem;
		background: #609edc;
		padding: .05rem .05rem;
		color: #fff;
		margin-left: .05rem;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		display: inline-block;
		vertical-align: middle;
	}

	p {
		display: inline-block;
		vertical-align: middle;
		font-size: .15rem;
		color: #666666;
		display: inline-block;
		vertical-align: middle;
	}

	h3 {
		font-size: .22rem;
		color: #333333;
		padding-bottom: .15rem;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
	}

	.fl {
		float: left;
	}
</style>
